<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <title>租赁管理</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/paginate.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/table.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/qulitity.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/beautify-time.css" type="text/css">
    <script src="${newframe}/js/compatible.js"></script>
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <script>
        function rent() {
            window.parent.showModelIframe("${URL_RENT_TORENT}", "详细内容", 800, 400);
        }
        function back() {
            var checkedArray = getCheckedArray();
            if (checkedArray.length != 1) {
                alert("请勾选一条数据修改");
                return;
            }
            window.parent.showModelIframe("${URL_RENT_TOBACK}?id=" + checkedArray[0], "详细内容", 800, 400);
        }
        function updateHistory() {
            var checkedArray = getCheckedArray();
            if (checkedArray.length != 1) {
                alert("请勾选一条数据修改");
                return;
            }
            window.parent.showModelIframe("${URL_RENT_TORENTHISTORY}?id=" + checkedArray[0], "详细内容", 800, 400);
        }
    </script>
</head>
<body>
<div class="wrap">
    <div class="page-header">
        <!-- /.page-header -->
        <ul class="page_nav">
            <li class="first cur">美康租赁平台&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li class="cur">功能管理&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li>租赁管理</li>
        </ul>
    </div>
    <div class="form">
        <label>设备名称:</label>
        <select id="instrumentType" name="instrumentType" class="SN">
            <medi:configOpt name="instrumentName"/>
        </select>
        <label>租借人:</label>
        <input id="rentMan" type="text" class="SN" placeholder="租借人">
        <label>租借状态:</label>
        <select id="rentStatus" name="rentStatus" class="SN">
            <medi:configOpt name="rentStatus"/>
        </select>
        <input id="query" type="button" value="搜索" class="search" onclick="refreshTable();">
        <span class="clear" onclick="cleanForm()">清除条件</span>
        <div></div>
    </div>
    <div id="tablepart">
        <table id="example" class="display" cellspacing="10" width="100%">
            <thead>
            <tr>
                <th><!-- <input id="all_id" type="checkbox"> --></th>
                <th>设备名称</th>
                <th>设备SN</th>
                <th>租借人</th>
                <th>租借人联系电话</th>
                <th>签约团队</th>
                <th>租借日期</th>
                <th>已付押金</th>
                <th>预租借时长</th>
                <th>归还日期</th>
                <th>返还押金</th>
                <th>归还设备状态</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<script>
    var table;
    function initTable() {
        table = $('#example').DataTable({
            "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-10'><'col-xs-6'f>r>" +
            "t" +
            "<'row'<'col-xs-6'i><'col-xs-6'p>>",
            "bFilter": false,//去掉搜索框
            "bAutoWidth": true, //自适应宽度
            "sPaginationType": "full_numbers",
            "ordering": false,//是否允许Datatables开启排序
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "${URL_RENT_SEARCHRENT}",
            "sAjaxDataProp": "dataList",//查询后，返回的集合
            "fnServerData": function (sSource, aoData, fnCallback) {  //查询条件
                aoData.push(
                    {"name": "instrumentType", "value": $("#instrumentType").val()},
                    {"name": "rentMan", "value": $("#rentMan").val()},
                    {"name": "rentStatus", "value": $("#rentStatus").val()}
                );
                $.ajax({
                    "dataType": 'json',
                    "url": sSource,
                    "type": 'post',
                    "data": aoData,
                    "success": fnCallback
                });

            },

            "aoColumns": [
                {
                    "targets": -1,
                    "data": null,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html('' +
                            '&nbsp;&nbsp;<input name="id" value="' + oData.rentId + '" type="checkbox">' +
                            '');
                    }
                }, {
                    "mDataProp": "instrumentType"
                }, {
                    "mDataProp": "instrumentSN"
                }, {
                    "mDataProp": "rentMan"
                }, {
                    "mDataProp": "rentTel"
                }, {
                    "mDataProp": "signTeam"
                }, {
                    "mDataProp": "rentTime"
                }, {
                    "mDataProp": "rentMoney"
                }, {
                    "mDataProp": "rentInterval"
                }, {
                    "mDataProp": "backTime"
                }, {
                    "mDataProp": "backMoney"
                }, {
                    "targets": 11,
                    "data": null,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        var configs = <medi:configJson name="backStatus"/>;
                   	 	$(nTd).html(!configs[sData.backStatus]?"":configs[sData.backStatus]);
                    }
                }],
            "createdRow": function (row, data, index) {
                $('td', row).eq(0).addClass('border_left');
                $('td', row).eq(13).addClass('border_right');
            },
            "oLanguage": {//插件的汉化
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "当前显示 _START_ 到 _END_条 ,共 _TOTAL_ 条记录",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "末页"
                },
                "sZeroRecords": "没有检索到数据",
                "sProcessing": "<img src='' />",
                "sSearch": "搜索"
            },
            "initComplete": function () {
               <shiro:hasPermission name="rent:history:update">
            		$("#mytool").append('<button id="delete_butt" type="button" class="btn btn-outline btn-success" onclick="updateHistory()" style="float:right;margin-right:10px;background: #35c990;border:none;">历史修改</button>');
               </shiro:hasPermission>
		       <shiro:hasPermission name="rent:rent">
		       		$("#mytool").append('<button id="update_butt" type="button" class="btn btn-outline btn-success" onclick="back()" style="float:right;;margin-right:10px;background: #35c990;border:none;">归还</button>');
	           </shiro:hasPermission>
		       <shiro:hasPermission name="rent:back">
		       		$("#mytool").append('<button id="add_butt" type="button" class="btn btn-outline btn-success" onclick="rent()" style="float:right;;margin-right:10px;background: #35c990;border:none;">租借</button>');
	           </shiro:hasPermission>
            }
        });
    }
    $(document).ready(function () {
        initTable();
        $('#example tr th').eq(0).addClass('border_left');
        $('#example tr th').eq(13).addClass('border_right');
        $('#example tbody tr td').addClass('active');
        $('#example tr td').eq(13).addClass('border_right');
        $('#example_paginate').parent().addClass('pagewidth');
        $('#example_info').parent().addClass('showPage');
        $('#example_length').parent().addClass('pageNow');
    });

    function getCheckedArray() {
        var checkedArray = [];
        $("input[name='id']").each(function () {
            if (this.checked) {
                checkedArray.push(this.value);
            }
        });
        return checkedArray;
    }
</script>
</body>
</html>